<template>
  <div  class="cropper-wrapper">
    <div class="info-groups">
      <label class="btn btn-orange" for="uploads" style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;">选择图片</label>
      <input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
      <input type="button" class="oper" value="+" title="放大" @click="changeScale(1)">
      <input type="button" class="oper" value="-" title="缩小" @click="changeScale(-1)">
      <input type="button" class="oper" value="↺" title="左旋转" @click="rotateLeft">
      <input type="button" class="oper" value="↻" title="右旋转" @click="rotateRight">
      <input type="button" class="btn btn-blue" value="上传背景图" @click="finish('blob')">
    </div>
    <div>
      <div class="cropper-content">
        <div class="cropper">
          <vue-cropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
            :fixedNumber="option.fixedNumber"
            @realTime="realTime"
            @imgLoad="imgLoad"
          ></vue-cropper>
        </div>
<!--        <div class="show-preview">-->
<!--          <div :style="previews.div" class="preview">-->
<!--            <img :src="previews.url" :style="previews.img">-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import { VueCropper }  from 'vue-cropper'
  console.log(VueCropper)
  // import Api from '@/js/api.js' //接口url配置文件

  export default {
    components: {
      VueCropper
    },
    data() {
      return {
        headImg:'',
        //剪切图片上传
        crap: false,
        previews: {},
        option: {
          img: '',  // 裁剪图片的地址
          info: true, // 裁剪框大小信息
          outputSize:1, // 剪切后的图片质量（0.1-1）
          full: false, // 输出原图比例截图 props名full
          outputType: 'png', // 裁剪生成图片的格式
          canMove: true,  // 上传图片是否可以移动
          canMoveBox: true, // 截图框是否能拖动
          original: false,  // 上传图片按照原始比例渲染
          canMoveBox: true,  // 截图框能否拖动
          autoCrop: true,  // 是否默认生成截图框
          autoCropWidth:300,  // 默认生成截图框的宽度
          autoCropHeight:225,  // 默认生成截图框的高度
          fixedBox: true, // 固定截图框大小，不允许改变
          fixed: true,  // 是否开启截图框宽高固定比例
          fixedNumber: [4, 3] // 截图框宽高的比例
        },
        fileName:'',  //本机文件地址
        imgFile:'',
        uploadImgRelaPath:'', //上传后的图片的地址（不带服务器域名）
      }
    },
    mounted() {
      console.log(this.$refs.cropper)
    },

    methods: {
      //放大/缩小
      changeScale(num) {
        console.log('changeScale')
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      //坐旋转
      rotateLeft() {
        console.log('rotateLeft')
        this.$refs.cropper.rotateLeft();
      },
      //右旋转
      rotateRight() {
        console.log('rotateRight')
        this.$refs.cropper.rotateRight();
      },
      //上传图片（点击上传按钮）
      finish(type) {
        console.log('finish')
        let _this = this;
        let formData = new FormData();
        // 输出
        if (type === 'blob') {
          this.$refs.cropper.getCropBlob((data) => {
            let img = window.URL.createObjectURL(data)
            this.model = true;
            this.modelSrc = img;
            formData.append("file", data, this.fileName);
            // this.$http.post(Api.uploadSysHeadImg.url, formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}})
            // .then((response)=>{
            //   var res = response.data;
            //   if(res.success == 1){
            //     $('#btn1').val('');
            //     _this.imgFile = '';
            //     _this.headImg = res.realPathList[0];  //完整路径
            //     _this.uploadImgRelaPath = res.relaPathList[0];  //非完整路径
            //     _this.$message({　　//element-ui的消息Message消息提示组件
            //       type: 'success',
            //       message: '上传成功'
            //     });
            //   }
            // })
          })
        } else {
          this.$refs.cropper.getCropData((data) => {
            this.model = true;
            this.modelSrc = data;
          })
        }
      },
      // 实时预览函数
      realTime(data) {
        console.log('realTime')
        console.log(data)
        this.previews = data
      },

      //选择本地图片
      uploadImg(e, num) {
        console.log('uploadImg');
        var _this = this;
        //上传图片
        var file = e.target.files[0]
        _this.fileName = file.name;
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
          return false
        }
        var reader = new FileReader();
        reader.onload =(e) => {
          let data;
          if (typeof e.target.result === 'object') {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]))
          }
          else {
            data = e.target.result
          }
          if (num === 1) {
            _this.option.img = data
          } else if (num === 2) {
            _this.example2.img = data
          }
        }
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);

      },
      imgLoad (msg) {
        console.log('imgLoad')
        console.log(msg)
        console.log(arguments)
      }
    },

  }
</script>

<style lang="stylus">
  .info-groups
    display flex
    justify-content center
    margin 20px auto
    .oper
      height 25px
      width 25px
      border-radius 50%
      font-size 20px
      margin 3px 5px
  .cropper-content
    display flex
    flex-direction: column
    justify-content: center
    .cropper
      width 100%
      height 10rem
      margin 0 auto
    /*.show-preview*/
    /*  flex: 1*/
    /*  display: flex*/
    /*  justify-content: center*/
    /*  .preview*/
    /*    margin 30px auto*/
    /*    overflow hidden*/
    /*    border 1px solid #cccccc*/
    /*    background #cccccc*/
</style>
